<!DOCTYPE html>
<html lang="en">
<!--做一个广告：在页面的左边上下飘动，每五秒走一次，
该广告上有一个关闭按钮，但是点击该按钮时又会移到右边-->
<head>
    <meta charset="UTF-8">
    <title>广告</title>
    <style type="text/css" media="screen">
        *{
            margin:0;
            padding:0;
        }
        ul>li img{
            width:100px;
            height:100px;
        }
        .down{
            position: absolute;
            bottom:0;
            transform: translate(0,0);
        }
        .up{
            position: absolute;
            top:0;
            transform: translate(0,0);
        }
        .left {
            position: absolute;
            left: 10px;
        }

        .right {
            position: absolute;
            right: 10px;
        }
    </style>
</head>



<body>

<ul>
    <li>
        <img src="2015318212559536.jpg">

    </li>
</ul>
<div id="haha" onclick="taozou(this)" class="left">
</div>

    <!--一点击鼠标就会拿到h1-->

<script type="text/javascript">

    function taozou(ad)
    {
        ad.classList.add('img');
        console.log('ad');
        if(ad.classList.contains('left')){
            ad.classList.remove('left');
            ad.classList.add('right');
        }else
        {
            ad.classList.remove('right');
            ad.classList.add('left');
        }
    }


    setInterval(function() {
        var num=0;
        var dd = document.querySelector("img");
        if(num++%5==0){
            dd.classList.add("down");
        }else{
            dd.classList.add("up");
        }
    },5000);
</script>

</body>
</html>